<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Roker  - Corporate, Creative, Multi Purpose, Responsive And Retina Template</title> 
    <meta name="keywords" content="HTML5 Template" />
    <meta name="description" content="Roker  - Corporate, Creative, Multi Purpose, Responsive And Retina Template">
    <meta name="author" content="iwthemes.com">   

    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Theme CSS -->
    <link href="css/style.css" rel="stylesheet" media="screen">

    <!-- Skins Theme -->
    <link href="#" rel="stylesheet" media="screen" class="skin">

    <!-- Favicons -->
    <link rel="shortcut icon" href="img/icons/favicon.ico">
    <link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">  

    <!-- Head Libs -->
    <script src="js/modernizr.js"></script>

    <!--[if lte IE 9]>
        <script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
        <script src="js/responsive/respond.js"></script>
    <![endif]-->

    <!-- styles for IE -->
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="css/ie/ie.css" type="text/css" media="screen" />            
    <![endif]-->

    <!-- Skins Changer-->
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
   
  </head>
  <body> 

     <!-- Theme-options -->
    <div id="theme-options">
            <div class="title">Theme Options<span title="Theme Options"><i class="fa fa-cogs right"></i></span></div>
            <span>COLORS</span>
            <ul id="colorchanger">      
                <li><a class="colorbox blue" href="?theme=blue" title="Blue Skin"></a></li>
                <li><a class="colorbox red" href="?theme=red" title="Red Skin"></a></li>
                <li><a class="colorbox yellow" href="?theme=yellow" title="Yellow Skin"></a></li>
                <li><a class="colorbox green" href="?theme=green" title="Green Skin"></a></li>
                <li><a class="colorbox orange" href="?theme=orange" title="Orange Skin"></a></li>
                <li><a class="colorbox purple" href="?theme=purple" title="Purple Skin"></a></li>
                <li><a class="colorbox pink" href="?theme=pink" title="Pink Skin"></a></li>
                <li><a class="colorbox cocoa" href="?theme=cocoa" title="Cocoa Skin"></a></li>
            </ul>
            <span>LAYOUT STYLE</span>
            <ul class="layout-style">      
                <li class="wide active">Wide</li>
                <li class="boxed">Boxed</li> 
                <li class="boxed-margin">Boxed Margin</li>               
            </ul>
            <span>WEBSITE TYPE</span>
           <ul class="layout-style">      
                <li><a href="index.html">Corporate</a></li>
                <li><a href="index-creative.html">Creative</a></li>
                <li class="active"><a href="index-one-page.html" >One Page</a></li>                
            </ul>  
            <div class="patterns">
                <span>BACKGROUND PATTERNS</span>
                <ul class="backgrounds">
                    <li class="bgnone" title="None - Default"></li>
                    <li class="bg1"></li>
                    <li class="bg2"></li>
                    <li class="bg3"></li>
                    <li class="bg4 "></li>
                    <li class="bg5"></li> 
                    <li class="bg6"></li>
                    <li class="bg7"></li>
                    <li class="bg8"></li>
                    <li class="bg9 "></li>
                    <li class="bg10"></li> 
                    <li class="bg11"></li>                   
                </ul>  
            </div>
    </div>
    <!-- End Theme-options -->
    
    <div id="home"></div>

    <!-- layout-->
    <div id="layout">

        <!-- Login Client -->
        <div class="jBar">
          <div class="container">            
              <div class="row">    

                  <div class="col-md-10">
                     <div class="row padding-top-mini">
                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-check-square"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Login or create new account.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam. Pellentesque habitant</p>
                            </div>
                        </div>      
                        <!-- End Item service-->

                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-star"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Review your order.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam Pellentesque habitant.</p>
                            </div>
                        </div>      
                        <!-- End Item service-->

                        <!-- Item service-->
                        <div class="col-md-4">
                            <div class="item-service border-right">
                                <div class="row head-service">
                                    <div class="col-md-2">
                                        <i class="fa fa-credit-card"></i>                             
                                    </div>
                                    <div class="col-md-10">
                                        <h5>Payment And FREE shipment.</h5>
                                    </div>
                                </div>  
                                <p>Pellentesque habitant morbi fames ac turpis egestas. Vestibulum tortor quam. Pellentesque habitant</p>
                            </div>
                        </div>      
                        <!-- End Item service-->
                     </div>
                  </div>

                  <div class="col-md-2">
                      <h5>Client Login</h5>
                      <form>
                          <input type="email" placeholder="Username" required>
                          <input type="password" placeholder="Password" required>
                          <input type="submit" class="btn btn-primary" value="sign in">
                          <span>Or</span>                       
                          <input type="submit" class="btn btn-primary" value="Register">
                      </form>
                  </div>

                            
                  <span class="jTrigger downarrow"><i class="fa fa-minus"></i></span>
              </div>
          </div>
      </div>
      <span class="jRibbon jTrigger up" title="Login"><i class="fa fa-plus"></i></span>
      <div class="line"></div>
      <!-- End Login Client -->

        <!-- Info Head -->
        <section class="info-head">  
            <div class="container">
                <ul>  
                    <li><i class="fa fa-headphones"></i> 01800034567</li>
                    <li><i class="fa fa-comment"></i> <a href="#">Live chat</a></li>
                    <li>
                        <ul>
                          <li class="dropdown">
                            <i class="fa fa-globe"></i> 
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Language<i class="fa fa-angle-down"></i>
                            </a>
                             <ul class="dropdown-menu">  
                                 <li><a href="#"><img src="img/language/spanish.png" alt="">Spanish</a></li>
                                 <li><a href="#"><img src="img/language/english.png" alt="">English</a></li>
                                 <li><a href="#"><img src="img/language/frances.png" alt="">Frances</a></li>
                                 <li><a href="#"><img src="img/language/portugues.png" alt="">Portuguese</a></li>
                            </ul>
                          </li>                      
                        </ul>
                    </li>
                </ul> 
            </div>            
        </section>
        <!-- Info Head -->

        <!-- Header-->
        <header class="animated fadeInDown delay1">           
            <div class="container">
                <div class="row">

                    <!-- Logo-->
                    <div class="col-md-3 logo">
                        <a href="index.html" title="Return Home">                            
                            <img src="css/skins/orange/logo.png" alt="Logo" class="logo_img">
                        </a>
                    </div>
                    <!-- End Logo-->
                                                      
                    <!-- Nav-->
                    <nav class="col-md-9">
                        <!-- Menu-->
                        <ul id="menu" class="sf-menu">
                            <li>
                                <a href="#home">HOME <i class="fa fa-angle-down"></i></a>
                                <ul>                                  
                                    <li><a href="index.html">Home Corporate</a></li>
                                    <li><a href="index-creative.html">Home Creative</a></li>
                                    <li><a href="index-alternative.html">Home Alternative</a></li>
                                    <li><a href="index-one-page.html">Home One Page</a></li>
                                </ul>
                            </li>
                            <li><a href="#service">SERVICES</a></li>
                            <li><a href="#work">RECENT PROJECTS</a></li>
                            <li><a href="#team">OUR TEAM</a></li>                                 
                            <li><a href="#contact">CONTACT</a></li>
                        </ul>
                        <!-- End Menu-->
                    </nav>
                    <!-- End Nav-->
                    
                </div><!-- End Row-->
            </div><!-- End Container-->
        </header>
        <!-- End Header-->


        <!-- Slide -->           
        <section class="camera_wrap camera_white_skin" id="slide-camera-simple">
            <div data-thumb="img/slide/slides/1.jpg" data-src="img/slide/slides/1.jpg">
                <div class="camera_caption fadeFromBottom">
                    Corporate. <em>And unique Desing</em>
                </div>
            </div>
            <div data-thumb="img/slide/slides/2.jpg" data-src="img/slide/slides/2.jpg">
                <div class="camera_caption fadeFromBottom">
                   Full retina ready, <em>Incons Retina</em>
                </div>
            </div>
            <div data-thumb="img/slide/slides/3.jpg" data-src="img/slide/slides/3.jpg">
                <div class="camera_caption fadeFromBottom">
                    <em>It's completely solution</em> Great Template
                </div>
            </div>
            <div data-thumb="img/slide/slides/4.jpg" data-src="img/slide/slides/4.jpg">
                <div class="camera_caption fadeFromBottom">
                   Responsive web design<em>to customize your project</em> as more as possible
                </div>
            </div>
        </section><!-- #camera_wrap_2 -->  
        <!-- End Slide --> 


       <!-- Services -->
        <section class="paddings services position-relative" id="service">
            <div class="container">
                
                <i class="fa fa-cogs icon-section top right"></i>                

                <!-- Title Heading --> 
                <div class="titles-heading">
                    <div class="line"></div>
                     <h1>Great Services
                        <span>
                          <i class="fa fa-star"></i>  
                          tristique senectus malesuada
                          <i class="fa fa-star"></i>  
                        </span>
                     </h1>
                </div> 
                <!-- End Title Heading --> 

              <!-- Row fuid-->
              <div class="row padding-top">
                 <!-- Item service-->
                  <div class="col-md-4">
                      <div class="item-service border-right">
                          <div class="row head-service">
                              <div class="col-md-2">
                                  <i class="fa fa-star"></i>                             
                              </div>
                              <div class="col-md-10">
                                  <h4>High Quality</h4>
                                  <h5>tristique senectus malesuada</h5>
                              </div>
                          </div>                          
                          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
                      </div>
                  </div>      
                  <!-- End Item service-->

                  <!-- Item service-->
                  <div class="col-md-4">
                      <div class="item-service border-right">
                          <div class="row head-service">
                              <div class="col-md-2">
                                 <i class="fa fa-fire"></i>                            
                              </div>
                              <div class="col-md-10">
                                  <h4>Ultra Hot Design</h4>
                                  <h5>tristique senectus malesuada</h5>
                              </div>
                          </div>                          
                          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
                      </div>
                  </div>      
                  <!-- End Item service-->

                  <!-- Item service-->
                  <div class="col-md-4">
                      <div class="item-service">
                          <div class="row head-service">
                              <div class="col-md-2">
                                  <i class="fa fa-cogs"></i>                    
                              </div>
                              <div class="col-md-10">
                                  <h4>Free Updates and Support</h4>
                                  <h5>tristique senectus malesuada</h5>
                              </div>
                          </div>                          
                          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
                      </div>
                  </div>      
                  <!-- End Item service-->
                 
              </div>
              <!-- End Row fuid-->

              <!-- Row fuid-->
              <div class="row">
                 <!-- Item service-->
                  <div class="col-md-4">
                      <div class="item-service border-right">
                          <div class="row head-service">
                              <div class="col-md-2">
                                  <i class="fa fa-thumbs-up"></i>                    
                              </div>
                              <div class="col-md-10">
                                  <h4>24/7 Support</h4>
                                  <h5>tristique senectus malesuada</h5>
                              </div>
                          </div>                          
                          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
                      </div>
                  </div>      
                  <!-- End Item service-->

                  <!-- Item service-->
                  <div class="col-md-4">
                      <div class="item-service border-right">
                          <div class="row head-service">
                              <div class="col-md-2">
                                  <i class="fa fa-plane"></i>                             
                              </div>
                              <div class="col-md-10">
                                  <h4>Flexible Solutions</h4>
                                  <h5>tristique senectus malesuada</h5>
                              </div>
                          </div>                          
                          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
                      </div>
                  </div>      
                  <!-- End Item service-->

                  <!-- Item service-->
                  <div class="col-md-4">
                      <div class="item-service">
                          <div class="row head-service">
                              <div class="col-md-2">
                                    <i class="fa fa-pencil"></i>                            
                              </div>
                              <div class="col-md-10">
                                  <h4>Original Design</h4>
                                  <h5>tristique senectus malesuada</h5>
                              </div>
                          </div>                          
                          <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
                      </div>
                  </div>      
                  <!-- End Item service-->
                 
              </div>
              <!-- End Row fuid-->
               
            </div>
            <!-- End Container-->
        </section>
        <!-- End Services-->


        <!-- Works Carousel -->
        <section class="paddings borders section-gray pattern-portfolios" id="work">
        
                <!-- Title Heading -->                
                <h2 class="text-center">Recent Works</h2>               
                <!-- End Title Heading --> 

                <!-- Items Works -->
                <ul id="works" class="works padding-top-mini">

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/1.jpg" alt="Image"/>                               
                             <a href="img/works/1.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Jekas - Html</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-tablet" data-toggle="tooltip" title data-original-title="Responsive Desing"></i>
                                <i class="fa fa-desktop" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/2.jpg" alt="Image"/>                               
                             <a href="img/works/2.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Mycv - Html</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-android" data-toggle="tooltip" title data-original-title="Android Support"></i>
                                <i class="fa fa-apple" data-toggle="tooltip" title data-original-title="Mac Support"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/3.jpg" alt="Image"/>                               
                             <a href="img/works/3.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Megahost - Html</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-html5" data-toggle="tooltip" title data-original-title="Html5 Compatible"></i>
                                <i class="fa fa-css3" data-toggle="tooltip" title data-original-title="Css3 Support"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/4.jpg" alt="Image"/>                               
                             <a href="img/works/4.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Studio - Landing Page</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-linux" data-toggle="tooltip" title data-original-title="linux plataform"></i>
                                <i class="fa fa-windows" data-toggle="tooltip" title data-original-title="Windows plataform"></i> 
                                <i class="fa fa-apple" data-toggle="tooltip" title data-original-title="Mac plataform"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/5.jpg" alt="Image"/>                               
                             <a href="img/works/5.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Ebook - Landing Page</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-tablet" data-toggle="tooltip" title data-original-title="Responsive Desing"></i>
                                <i class="fa fa-desktop" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/6.jpg" alt="Image"/>                               
                             <a href="img/works/6.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Gotten - Landing Page</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-linux" data-toggle="tooltip" title data-original-title="Linux"></i>
                                <i class="fa fa-desktop" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/7.jpg" alt="Image"/>                               
                             <a href="img/works/7.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Vinilo - Html Page</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-linux" data-toggle="tooltip" title data-original-title="Linux"></i>
                                <i class="fa fa-apple" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                    <!-- Item Work -->
                    <li class="item-work">
                       <div class="hover">
                            <img src="img/works/8.jpg" alt="Image"/>                               
                             <a href="img/works/8.jpg" class="fancybox" title="Image"><div class="overlay"></div></a>
                        </div>                                   
                        <div class="info-work">
                            <h4> Newhost - Hosting Page</h4>
                            <p>Great, Unique and responsive template.</p>
                            <div class="icons-work">
                                <i class="fa fa-html5" data-toggle="tooltip" title data-original-title="Linux"></i>
                                <i class="fa fa-css3" data-toggle="tooltip" title data-original-title="Retina Display"></i> 
                            </div>
                        </div>  
                    </li>  
                    <!-- Item Work -->

                </ul>
                <!-- End Items Works -->
         
        </section>
        <!-- End Works Carousel-->

      
         <!-- Slides Team -->
        <section class="padding-top slide-team" id="team">
           
            <!-- Slide Team  -->
            <ul id="slide-team">
                    
                    <!-- Item Slide Team  -->
                    <li>
                        <div class="container">
                            <div class="row">

                                <!-- Image Team  -->
                                <div class="col-md-3">
                                   <a href="img/team-members/1.png" class="fancybox">
                                        <img src="img/team-members/1.png" alt="" title="View Image">
                                    </a>
                                </div>
                                <!-- End Image Team  -->
                                
                                <!-- Info  Team  -->
                                <div class="col-md-5 padding-top-mini">
                                  <h3 class="title-subtitle">
                                        Federic Gordon.
                                        <span>Front End.</span>
                                   </h3>
                                   <p>Inani nominati sit eu. Te ubique cotidieque philosophia mel, vix id omnes iudico prompta. Ex usu nihil mediocritatem. Sea quod vituperata no, omittam offendit vel in. Noster voluptua luptatum id mea.</p>

                                    <a href="mailto:demo@ithemes.com" target="_blank" class="btn btn-primary">SEND ME AN EMAIL</a>

                                    <!-- Social-->
                                    <ul class="social">
                                        <li data-toggle="tooltip" title data-original-title="Facebook">
                                            <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                                        </li> 
                                        <li data-toggle="tooltip" title data-original-title="Twitter">
                                            <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                                        </li> 
                                        <li data-toggle="tooltip" title data-original-title="Youtube">
                                            <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                                        </li>                     
                                    </ul>
                                    <!-- End Social-->
                                  
                               </div>
                               <!-- End Info  Team  -->
                                
                                <!-- Skills Team  -->
                                <div class="col-md-4 padding-top-mini">
                                     <h3>Skills</h3>
                                    <div class="meter color nostripes">
                                        <span style="width: 50%"><span>DESING</span><span class="text-right">50%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 70%"><span>PHOTOGRAPHY</span><span class="text-right">70%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 90%"><span>BRANDING</span><span class="text-right">90%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 100%"><span>SOCIAL MEDIA</span><span class="text-right">100%</span></span>
                                    </div>
                               </div>
                               <!-- End Skills Team  -->

                           </div> 
                       </div> 
                    </li>
                    <!-- End Item Slide Team  -->

                     <!-- Item Slide Team  -->
                    <li>
                        <div class="container">
                            <div class="row">

                                <!-- Image Team  -->
                                <div class="col-md-3">
                                   <a href="img/team-members/2.png" class="fancybox">
                                        <img src="img/team-members/2.png" alt="" title="View Image">
                                    </a>
                                </div>
                                <!-- End Image Team  -->
                                
                                <!-- Info  Team  -->
                                <div class="col-md-5 padding-top-mini">
                                  <h3 class="title-subtitle">
                                        Federic Gordon.
                                        <span>Front End.</span>
                                   </h3>
                                   <p>Inani nominati sit eu. Te ubique cotidieque philosophia mel, vix id omnes iudico prompta. Ex usu nihil mediocritatem. Sea quod vituperata no, omittam offendit vel in. Noster voluptua luptatum id mea.</p>

                                    <a href="mailto:demo@ithemes.com" target="_blank" class="btn btn-primary">SEND ME AN EMAIL</a>

                                    <!-- Social-->
                                    <ul class="social">
                                        <li data-toggle="tooltip" title data-original-title="Facebook">
                                            <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                                        </li> 
                                        <li data-toggle="tooltip" title data-original-title="Twitter">
                                            <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                                        </li> 
                                        <li data-toggle="tooltip" title data-original-title="Youtube">
                                            <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                                        </li>                     
                                    </ul>
                                    <!-- End Social-->
                                  
                               </div>
                               <!-- End Info  Team  -->
                                
                                <!-- Skills Team  -->
                                <div class="col-md-4 padding-top-mini">
                                     <h3>Skills</h3>
                                    <div class="meter color nostripes">
                                        <span style="width: 50%"><span>DESING</span><span class="text-right">50%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 70%"><span>PHOTOGRAPHY</span><span class="text-right">70%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 90%"><span>BRANDING</span><span class="text-right">90%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 100%"><span>SOCIAL MEDIA</span><span class="text-right">100%</span></span>
                                    </div>
                               </div>
                               <!-- End Skills Team  -->

                           </div> 
                       </div> 
                    </li>
                    <!-- End Item Slide Team  -->

                     <!-- Item Slide Team  -->
                    <li>
                        <div class="container">
                            <div class="row">

                                <!-- Image Team  -->
                                <div class="col-md-3">
                                   <a href="img/team-members/3.png" class="fancybox">
                                        <img src="img/team-members/3.png" alt="" title="View Image">
                                    </a>
                                </div>
                                <!-- End Image Team  -->
                                
                                <!-- Info  Team  -->
                                <div class="col-md-5 padding-top-mini">
                                  <h3 class="title-subtitle">
                                        Federic Gordon.
                                        <span>Front End.</span>
                                   </h3>
                                   <p>Inani nominati sit eu. Te ubique cotidieque philosophia mel, vix id omnes iudico prompta. Ex usu nihil mediocritatem. Sea quod vituperata no, omittam offendit vel in. Noster voluptua luptatum id mea.</p>

                                    <a href="mailto:demo@ithemes.com" target="_blank" class="btn btn-primary">SEND ME AN EMAIL</a>

                                    <!-- Social-->
                                    <ul class="social">
                                        <li data-toggle="tooltip" title data-original-title="Facebook">
                                            <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                                        </li> 
                                        <li data-toggle="tooltip" title data-original-title="Twitter">
                                            <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                                        </li> 
                                        <li data-toggle="tooltip" title data-original-title="Youtube">
                                            <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                                        </li>                     
                                    </ul>
                                    <!-- End Social-->
                                  
                               </div>
                               <!-- End Info  Team  -->
                                
                                <!-- Skills Team  -->
                                <div class="col-md-4 padding-top-mini">
                                     <h3>Skills</h3>
                                    <div class="meter color nostripes">
                                        <span style="width: 50%"><span>DESING</span><span class="text-right">50%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 70%"><span>PHOTOGRAPHY</span><span class="text-right">70%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 90%"><span>BRANDING</span><span class="text-right">90%</span></span>
                                    </div>
                                    <div class="meter color nostripes">
                                        <span style="width: 100%"><span>SOCIAL MEDIA</span><span class="text-right">100%</span></span>
                                    </div>
                               </div>
                               <!-- End Skills Team  -->

                           </div> 
                       </div> 
                    </li>
                    <!-- End Item Slide Team  -->

                  
            </ul>  
            <!-- End Slide Team  -->  
        
        </section>
        <!-- End Team Slide-->


        <!-- Important Info -->
        <section class="padding-top important-info pattern-important-info">
            <div class="container text-center">
               <img src="img/team-members/members.png" alt="">  
               <div class="title">
                   <h1>Great Team.</h1>
               </div>     
            </div>
        </section>
        <!-- End Important Info -->   

    
        <!-- Contact Us -->
        <section class="paddings" id="contact">
            <div class="container">
                <div class="row">

                    <!-- Sidebars -->
                    <div class="col-md-4 sidebars">

                        <aside>
                            <h4>The Office</h4>
                            <address>
                              <strong>Roken, Inc.</strong><br>
                              <i class="fa fa-map-marker"></i><strong>Address: </strong> fa795 Folsom Ave, Suite 600<br>
                              <i class="fa fa-plane"></i><strong>City: </strong>San Francisco, CA 94107<br>
                              <i class="fa fa-phone"></i> <abbr title="Phone">P:</abbr> (123) 456-7890
                            </address>

                            <address>
                              <strong>Roken Emails</strong><br>
                              <i class="fa fa-envelope"></i><strong>Email:</strong><a href="mailto:#"> sales@roken.com</a><br>
                              <i class="fa fa-envelope"></i><strong>Email:</strong><a href="mailto:#"> support@roken.com</a>
                            </address>
                        </aside>

                        <hr class="tall">

                         <aside>
                            <h4>Recent flickr</h4>
                            <ul id="flickr-aside" class="thumbs"></ul>
                        </aside>
               
                    </div>
                    <!-- End Sidebars -->

                    <!-- Content Right -->
                    <div class="col-md-8">
                        <h3>Contact Info</h3>
                        <p class="lead">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla non pulvinar.
                        </p>

                        <hr class="tall">
                        
                        <!-- Tabs -->
                        <div class="tabs">
                            <!-- Tab nav -->
                            <ul class="nav nav-tabs">
                                <li class="active"><a href="#contactUs" data-toggle="tab">
                                    <i class="fa fa-envelope"></i> Contact Us</a>
                                </li>
                                <li class=""><a href="#support" data-toggle="tab">
                                    <i class="fa fa-bullhorn"></i>Suport</a>
                                </li>
                            </ul>
                            <!-- End Tab nav -->

                            <!-- Tab Content -->
                            <div class="tab-content">
                                <!-- Tab item -->
                                <div class="tab-pane active" id="contactUs">
                                    
                                    <h4>Contact Us</h4>

                                    <!-- Form Contact -->
                                    <form class="form-contact" action="php/send-mail-contact.php">
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-6">
                                                    <label>Your name *</label>
                                                    <input type="text"  required="required" value="" maxlength="100" class="form-control" name="Name" id="name">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Your email address *</label>
                                                    <input type="email"  required="required" value="" maxlength="100" class="form-control" name="Email" id="email">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    <label>Comment *</label>
                                                    <textarea maxlength="5000" rows="10" class="form-control" name="message"  style="height: 138px;" required="required" ></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="submit" value="Send Message" class="btn btn-lg btn-primary">
                                            </div>
                                        </div>
                                    </form>
                                    <!-- End Form Contact --> 
                                    <div class="result"></div>
                                </div>
                                <!-- End Tab item -->

                                <!-- Tab item -->
                                <div class="tab-pane" id="support">
                                    
                                    <h4>Support</h4>

                                    <!-- Form Contact -->
                                    <form class="form-contact" action="php/send-mail-support.php">
                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-6">
                                                    <label>Your name *</label>
                                                    <input type="text"  required="required" value="" maxlength="100" class="form-control" name="Name">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Your email address *</label>
                                                    <input type="email"  required="required" value="" maxlength="100" class="form-control" name="Email">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-6">
                                                    <label>Subject</label>
                                                    <input type="text"  required="required" value="" class="form-control" name="Subject">
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Phone</label>
                                                    <input type="number"  required="required" value="" class="form-control" name="Phone">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <label>Problem</label>
                                                <select class="form-control" name="Problem">
                                                  <option>Licence</option>
                                                  <option>Network</option>
                                                  <option>Software</option>                                                  
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="form-group">
                                                <div class="col-md-12">
                                                    <label>Comment *</label>
                                                    <textarea maxlength="5000" rows="10" class="form-control" name="message"  style="height: 138px;" required="required" ></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <input type="submit" value="Send Message" class="btn btn-lg btn-primary">
                                            </div>
                                        </div>
                                    </form>
                                    <!-- End Form Contact --> 
                                    <div class="result"></div>
                                </div>
                                <!-- End Tab item -->

                            </div>
                            <!-- End Tab Content -->
                        </div>  
                        <!-- End Tabs -->                     

                    </div>
                    <!-- End Content Right -->


                </div>
            </div>
            <!-- End Container-->
        </section>
        <!-- End Contact Us-->
        

        <!-- footer top-->
        <footer class="footer-top">
            <div class="container">
               <div class="row">   
                   <div class="col-md-3">
                       <h3>018000-236-5899 </h3>
                   </div>
                   <div class="col-md-3">
                       <h3><a href="#">Support</a> - <a href="#">Sales</a></h3>
                   </div>
                   <div class="col-md-3">
                       <h3><a href="mailto:sales@roken.com" target="_blank">sales@roken.com</a></h3>
                   </div>
                   <div class="col-md-3">
                       <h3>24x7x365</h3>
                   </div>
               </div>                
            </div>
        </footer>      
        <!-- End footer Top-->

        <!-- footer Center-->
        <footer class="footer-center">
            <div class="container">

               <div class="row top">   
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-phone"></i>
                        <h4>Talk to u</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-comment"></i>
                        <h4>Live Chat</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                       <span class="arrow_footer"></span>
                        <i class="fa fa-envelope"></i>
                        <h4>Email Us</h4>                        
                   </div>
                   <div class="col-md-3 item-center">
                        <span class="arrow_footer"></span>
                        <i class="fa fa-thumbs-up"></i>
                        <h4>Good Support</h4>                        
                   </div>
               </div>    

                <div class="row">   
                   <div class="col-md-4">
                        <div class="border-right">
                            <i class="fa fa-twitter"></i>
                            <h4>Latest Tweet</h4>                     
                            <div class="twitter">  

                            </div>                        
                        </div>
                   </div>
                   <div class="col-md-3">
                        <div class="border-right">
                            <h4>Newsletter</h4>
                            <p>Enter your e-mail and subscribe to our newsletter.</p>

                            <form id="newsletterForm" action="php/mailchip/newsletter-subscribe.php">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-envelope"></i>
                                    </span>
                                    <input class="form-control" placeholder="Email Address" name="email"  type="email" required="required">
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" type="submit" name="subscribe" >Go!</button>
                                    </span>
                                </div>
                            </form>   
                            <div id="result-newsletter"></div>
                       </div>
                    </div>
                    <div class="col-md-2">
                        <div class="border-right">
                            <h4>Recent Links</h4>
                            <ul class="links">
                                <li><i class="fa fa-check"></i> <a href="#">Work</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">About Us</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">Services</a></li>
                                <li><i class="fa fa-check"></i> <a href="#">Contact</a></li>
                            </ul>
                       </div>
                    </div>
                   <div class="col-md-3">
                        <h4>Recent flickr</h4>
                        <ul id="flickr" class="thumbs"></ul>
                   </div>
               </div>    

            </div>
        </footer>      
        <!-- End footer Center-->

        <!-- footer bottom-->
        <footer class="footer-bottom">
            <div class="container">
               <div class="row">   
                                                                  
                    <!-- Nav-->
                    <div class="col-md-8">
                        <div class="logo-footer">
                            <h2><span>R</span>oken<span>.</span></h2>
                        </div>
                        <!-- Menu-->
                        <ul class="menu-footer">
                            <li><a href="index.html">HOME</a> </li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="services.html">SERVICES</a></li> 
                            <li><a href="portfolio.html">PORTFOLIO</a></li> 
                            <li><a href="blog.html">BLOG</a></li>                                                     
                            <li><a href="contact.html">CONTACT</a></li>
                        </ul>
                        <!-- End Menu-->

                        <!-- coopring-->
                       <div class="row coopring">
                           <div class="col-md-8">
                               <p>&copy; 2013 Roken . All Rights Reserved.  1995 - 2013</p>
                           </div>
                       </div>    
                       <!-- End coopring-->  

                    </div>
                    <!-- End Nav-->

                    <!-- Social-->
                    <div class="col-md-4">
                        <!-- Menu-->
                        <ul class="social">
                            <li data-toggle="tooltip" title data-original-title="Facebook">
                                <a href="#" target="_blank"><i class="fa fa-facebook"></i></a>
                            </li> 
                            <li data-toggle="tooltip" title data-original-title="Twitter">
                                <a href="#" target="_blank"><i class="fa fa-twitter"></i></a>
                            </li> 
                            <li data-toggle="tooltip" title data-original-title="Youtube">
                                <a href="#" target="_blank"><i class="fa fa-youtube"></i></a>
                            </li>                     
                        </ul>
                        <!-- End Menu-->
                    </div>
                    <!-- End Social-->

               </div> 
                    
            </div>
        </footer>      
        <!-- End footer bottom-->

    </div>
    <!-- End layout-->

    <!-- ======================= JQuery libs =========================== -->
    <!-- Always latest version of jQuery-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <!-- jQuery local-->    
    <script>window.jQuery || document.write('<script src="js/jquery.js"><\/script>')</script>    
    <!--Nav-->
    <script type="text/javascript" src="js/nav/tinynav.js"></script> 
    <script type="text/javascript" src="js/nav/superfish.js"></script>  
    <script type="text/javascript" src="js/nav/hoverIntent.js"></script> 
    <script src="js/nav/jquery.sticky.js" type="text/javascript"></script>                                          
    <!--Totop-->
    <script type="text/javascript" src="js/totop/jquery.ui.totop.js" ></script>  
    <!--Slide-->
    <script type="text/javascript" src="js/slide/camera.js" ></script>      
    <script type='text/javascript' src='js/slide/jquery.easing.1.3.min.js'></script>  
    <!--FlexSlider-->
    <script src="js/flexslider/jquery.flexslider.js"></script> 
    <!--Ligbox--> 
    <script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script> 
    <!-- carousel.js-->
    <script src="js/carousel/carousel.js"></script>  
    <!-- Twitter Feed-->
    <script src="js/twitter/jquery.tweet.js"></script> 
    <!-- flickr Feed-->
    <script src="js/flickr/jflickrfeed.min.js"></script>  
    <!--Scroll-->   
    <script src="js/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
    <!-- Nicescroll -->
    <script src="js/scrollbar/jquery.nicescroll.js"></script>
    <!-- Maps -->
    <script src="js/maps/gmap3.js"></script>
    <!-- Filter -->
    <script src="js/filters/jquery.isotope.js" type="text/javascript"></script>
    <!--Theme Options-->
    <script type="text/javascript" src="js/theme-options/theme-options.js"></script>
    <script type="text/javascript" src="js/theme-options/jquery.cookies.js"></script>                               
    <!-- Bootstrap.js-->
    <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
    <!--MAIN FUNCTIONS-->
    <script type="text/javascript" src="js/main.js"></script>
    <!-- ======================= End JQuery libs =========================== -->
        
    </body>
</html>